import React,{useState,useEffect,useMemo, useRef} from 'react'
import store from '../redux/store'
import getCinemaListAction from '../actionCreator/getCinemaListAction'
export default function Search() {
  const [list, setList] = useState(store.getState().CinemaListReducer.list)
  const [mytext,setmytext]=useState("")

    useEffect(() => {
        if (store.getState().CinemaListReducer.list.length === 0) {
            // 去后台区数据
            store.dispatch(getCinemaListAction())
        }
        else {
            console.log("store 缓存");
        }
        var unsubscribe=store.subscribe(() => {
            // 更新传入数据
            setList(store.getState().CinemaListReducer.list)
        })
        return ()=>{
            // 销毁
            unsubscribe()
        }
    }, [])
    const getCinemaList = useMemo(() => list.filter(item => item.name.toUpperCase().includes(mytext.toUpperCase()) || item.address.toUpperCase().includes(mytext.toUpperCase())),[list,mytext])
  return (
    <div>
      Search
      <input type="text" value={mytext} style={{border:"1px solid grey",marginLeft:"10px"}} onChange={(e)=>{setmytext(e.target.value)}}/>
      <ul>
                    {
                        getCinemaList.map(item =>
                            <dl key={item.cinemaId} >
                                <dt style={{fontSize:"16px"}}>{item.name}</dt>
                                <dd style={{color:"grey",fontSize:"12px"}}>{item.address}</dd>
                            </dl>
                        )
                    }
                </ul>
    </div>
  )
}
